<template>
    <div class="hotsong">
        <div class="btn">
            <div class="btn_l">
                <a class="play" title="播放" @click="play">
                    <i class="play_in">
                      <span>播放</span>
                    </i>
                  </a>
                <a class="add"  title="添加到播发列表"></a>
                <a class="dis" title="收藏">
                    <span>收藏热门{{ songCount }}</span>
                </a>
            </div>
            <div class="btn_r">
                <a class="download">
                    <span>歌单下载</span>
                </a>
            </div>
        </div>
        <div class="list">
            <div class="song">
              <div class="header">
                <li class="w1"></li>
                <li class="w2">歌曲标题</li>
                <li class="w3">时长</li>
                <li class="w4">歌手</li>
                <li class="w5">专辑</li>
              </div>
              <div class="mainer">
                <ul v-for="(item, index) in hotSongs" :key="index">
                  <li class="m1 ellipsis">
                    <span>{{ index + 1 }}</span>
                  </li>
                  <li class="m2">
                    <img :src="item.al.picUrl" />
                    <i class="play" @click="playmusic(index)" v-show="!item.privilege.cs"></i>
                    <i class="active" v-show="item.privilege.cs"></i>
                    <span :title="item.name" class="handle ellipsis">{{
                      item.name
                    }}</span>
                    <i class="mv" v-show="item.mv" @click="$router.push(`/mvlist/${item.mv}`)"></i>
                  </li>
                  <li class="m3">
                    <span class="time">{{ min(item) }}:{{ sec(item) }}</span>
                    <div class="show">
                      <a title="添加到播放列表" class="a1"></a>
                      <a title="收藏" class="a2"></a>
                      <a title="分享" class="a3"></a>
                      <a title="下载" class="a4"></a>
                    </div>
                  </li>
                  <li class="m4 ellipsis">
                    <a class="artist" v-for="item1 in item.ar" :key="item1.id" @click="$router.push(`/artlist/${item1.id}`)" :title="item1.name">{{ item1.name }}<span>/</span></a>
                  </li>
                  <li class="m5 ellipsis">
                    <a :title="item.al.name" @click="$router.push(`/albumlist/${item.al.id}`)">{{ item.al.name }}</a>
                  </li>
                </ul>
              </div>
            </div>
            <MusicPlay :ids="ids" :imgUrl="imgUrl" :isPlay="isPlay" />
        </div>
    </div>
</template>

<script>
import { HotSongApi } from "@/request/api";
import MusicPlay from "@/components/MusicPlay.vue";
export default {
    data () {
        return {
            songCount: 0,
            hotSongs: [],
            ids: 0,
            imgUrl: "https://img2.baidu.com/it/u=1611088966,2458167776&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            isPlay: false,
        }
    },
    components: {
        MusicPlay,
    },
    computed: {
        id() {
          return this.$route.params.id;
        },
    },
    created() {
        HotSongApi(this.id).then((res) => {
            // console.log(res);
            this.hotSongs = res.data.hotSongs;
            this.songCount = res.data.hotSongs.length;
        });
    },
    methods: {
        min(song) {
          if (parseInt(song.dt / 60000) < 10)
          return "0" + parseInt(song.dt / 60000);
          else return parseInt(song.dt / 60000);
        },
        sec(song) {
          let x = parseInt(song.dt / 60000);
          let y = parseInt(song.dt / 1000 - x * 60);
          if (y < 10) return "0" + y;
          else return y;
        },
        play() {
          this.hotSongs.forEach(item=>item.privilege.cs=false);
          this.hotSongs[0].privilege.cs = true;
          this.ids = this.hotSongs[0].id;
          this.imgUrl = this.hotSongs[0].al.picUrl;
          this.isPlay = true;
        },
        playmusic(index) {
          this.hotSongs.forEach(item=>item.privilege.cs=false);
          this.hotSongs[index].privilege.cs = true;
          this.ids = this.hotSongs[index].id;
          this.imgUrl = this.hotSongs[index].al.picUrl;
          this.isPlay = true;
        },
    },
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base";
.hotsong {
    .btn {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        .btn_l {
          height: 31px;
          display: flex;
          .play {
              span {
                font-size: 12px;
                color: #fff;
                line-height: 31px;
                padding: 0 0 0 35px;
              }
              .play_in {
                width: 65px;
                height: 31px;
                display: block;
                background: url("../../assets/images/public/button2.png") no-repeat;
                background-position: 0 -633px;
                &:hover {
                  cursor: pointer;
                  background-position: 0 -719px;
                }
              }
          }
          .add {
            width: 31px;
            height: 31px;
            margin-right: 5px;
            background: url("../../assets/images/public/button2.png") no-repeat 0 -1588px;

            &:hover {
              cursor: pointer;
              background-position: -40px -1588px;
            }
            &:active {
              background-position: -80px -1588px;
            }
          }
          .dis {
                margin-right: 6px;
                height: 100%;
                background: url("../../assets/images/public/button2.png") no-repeat;
                background-position: 0 -977px;
                span {
                    display: inline-block;
                    height: 100%;
                    background: url("../../assets/images/public/button2.png") no-repeat right -1106px;
                    line-height: 30px;
                    padding-left: 30px;
                    padding-right: 4px;
                    font-size: 12px;
                    // color: #ccc;
                }   
                &:hover {
                    color: #666;
                    cursor: pointer;
                }
            }
        }
        .btn_r {
            height: 31px;
            display: flex;
            .download {
                height: 31px;
                min-width: 23px;
                cursor: pointer;
                background: url("../../assets/images/public/button2.png") no-repeat;
                background-position: 0 -2761px;
                span {
                    height: 31px;
                    display: inline-block;
                    line-height: 30px;
                    padding-left: 28px;
                    padding-right: 8px;
                    background: url("../../assets/images/public/button2.png") no-repeat;
                    background-position: right -1020px;
                    font-size: 12px;
                }
                &:hover {
                    color: #666;
                    cursor: pointer;
                }
            }
        }
    }
    .list {
        width: 730px;
        min-height: 400px;
        float: left;
        .titles {
          width: 100%;
          height: 35px;
          border-bottom: 2px solid @red;
          h3 {
            font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
            font-size: 20px;
            line-height: 28px;
            font-weight: normal;
            color: #333;
            float: left;
          }
          .sub {
            margin: 9px 0 0 20px;
            float: left;
            color: #666;
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
            -webkit-text-size-adjust: none;
          }
          .more {
            margin-top: 5px;
            height: 16px;
            float: right;
            font-size: 12px;
            margin-right: 8px;
            .fc {
              color: @red;
              font-weight: bold;
            }
          }
        }
        .song {
          width: 640px;
          border: 1px solid #d9d9d9;
          .header {
            width: 640px;
            height: 39px;
            display: flex;
            font-size: 12px;
            color: #666;
      
            li {
              border-right: 1px solid #d9d9d9;
              background-image: linear-gradient(
                rgb(255, 255, 255),
                rgb(240, 240, 240)
              );
              padding: 8px 10px;
              box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
              line-height: 26px;
            }
            .w1 {
              width: 61px;
            }
            .w2 {
              width: 275px;
            }
            .w3 {
              width: 91px;
            }
            .w4 {
              width: 82px;
            }
            .w5 {
              width: 125px;
            }
          }
          .mainer {
            width: 100%;
            display: block;
            font-size: 12px;
            a {
              color: #000;
              text-decoration: none;
            }
            ul:nth-of-type(even) {
              background: #e5e5e5;
            }
            ul:nth-of-type(odd) {
              background: #f6f6f6;
            }
            .good {
              height: 66px;
              span,
              a,
              i {
                display: block;
                margin-top: 20px !important;
                font-size: 12px;
              }
            }
            ul {
              height: 30px;
              width: 100%;
              display: flex;
      
              &:hover .time {
                display: none !important;
              }
              &:hover .show {
                display: block !important;
              }
      
              li {
                padding: 6px 10px;
              }
              .m1 {
                width: 30px;
                // height: 100%;
                padding: 6px 10px;
                line-height: 18px;
                span {
                  float: left;
                  width: 25px;
                  height: 18px;
                  color: #999;
                  text-align: center;
                }
                i {
                  margin: 0 8px;
                  float: left;
                  width: 16px;
                  height: 17px;
                  background: url("../../assets/images/public/icon.png") no-repeat -67px -283px;
                }
              }
              .m2 {
                width: 326px;
                display: flex;
                align-items: center;
                .handle{
                  width: 180px;
                  cursor: pointer;
                }
                img {
                  float: left;
                  margin-right: 10px;
                  height: 20px;
                  // width: 20px;
                  margin-top: 3px;
                }
                .play {
                  float: left;
                  display: block;
                  width: 17px;
                  height: 17px;
                  margin-right: 8px;
                  background: url("../../assets/images/public/table.png") no-repeat -0px -103px;
                  margin-top: 1px;
      
                  &:hover {
                    background-position: -0px -128px;
                    cursor: pointer;
                  }
                }
                .active {
                  float: left;
                  display: block;
                  width: 17px;
                  height: 17px;
                  margin-right: 8px;
                  background: url("../../assets/images/public/table.png") no-repeat -20px -128px;
                }
                .mv {
                  float: left;
                  display: block;
                  width: 23px;
                  height: 17px;
                  background: url("../../assets/images/public/table.png") no-repeat;
                  background-position: 0 -151px;
                  &:hover {
                    background-position: -30px -151px;
                    cursor: pointer;
                  }
                }
                a {
                  width: 260px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  float: left;
                  margin-left: 10px;
                  &:hover {
                    color: #666;
                    cursor: pointer;
                    text-decoration: underline;
                  }
                }
              }
              .m3 {
                width: 91px;
                .time {
                  display: block;
                }
                .show {
                  width: 79px;
                  height: 18px;
                  display: none;
                  a {
                    margin: 2px 0 0 4px;
                    width: 18px;
                    height: 16px;
                    display: block;
                    float: left;
                    background: url("../../assets/images/public/table.png") no-repeat;
                    &:hover {
                      cursor: pointer;
                    }
                  }
                  .a1 {
                    width: 13px;
                    height: 13px;
                    margin-top: 2px;
                    margin-left: 0;
                    background: url("../../assets/images/public/icon.png") no-repeat;
                    background-position: 0 -700px;
      
                    &:hover {
                      background-position: -22px -700px;
                    }
                  }
                  .a2 {
                    background-position: 0 -174px;
                    &:hover {
                      background-position: -20px -174px;
                    }
                  }
                  .a3 {
                    background-position: 0 -195px;
                    &:hover {
                      background-position: -20px -195px;
                    }
                  }
                  .a4 {
                    background-position: -81px -174px;
                    &:hover {
                      background-position: -104px -174px;
                    }
                  }
                }
              }
              .m4 {
                width: 82px;
                color: #333;
                & a:hover {
                  color: #666;
                  cursor: pointer;
                  text-decoration: underline;
                }
                .artist {
                  &:last-child {
                    span {
                      display: none;
                    }
                  }
                }
              }
              .m5 {
                width: 132px;
                color: #333;
                & a:hover {
                  color: #666;
                  cursor: pointer;
                  text-decoration: underline;
                }
              }
            }
          }
        }
    }
    
}  
</style>